<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript特效多功能选项卡自动切换内容图片延迟加载</title> 
<style type="text/css"> 
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px 宋体,sans-serif;}
a{text-decoration:none;}
.wrap950{width:387px;float:left;border:1px solid #B1C8D7}
.area{width:387px;float:left;}
.img_area{width:387px;height:241px;overflow:hidden;}
.tab_area{width:387px;height:25px;overflow:hidden;}
.logo{background:url(http://img.alimama.cn/cms/images/1293761918601.jpg) no-repeat;}
.tab_area ul li{width:128px;height:25px;text-align:center;line-height:25px;background:url(http://img.alimama.cn/cms/images/1286949671151.jpg);float:left;margin-left:-1px;color:#FFFFFF;border-left-width:1px;border-left-style:solid;border-left-color:#B1C8D7;}
.tab_area ul li a{color:#1E50A2;}
.tab_area ul li.current{width:130px;background:url(http://img.alimama.cn/cms/images/1286949772541.jpg);}
.tab_area ul li.current a{color:#1E50A2;font-weight:600}
#tab1_2, #tab1_4, #tab1_6, #tab1_8, #tab2_2, #tab2_4, #tab2_6, #tab2_8{margin-left:0;}
.logo{width:387px;float:left;}
</style> 
</head> 
<body>
	<div class="wrap950"> 
		<div class="logo"><a title="网页特效开源代码" href="http://www.jsfoot.com/"><img width="193" height="74" alt="网页特效开源代码" src="http://www.jsfoot.com/skin/images/logo.gif" /></a></div> 
		
		<div class="area"> 
			<div class="tab_area" id="tab1"> 
				<ul> 
					<li id="tab1_1" class="current"><a href="http://www.jsfoot.com/jquery/items/">jQuery 特效</a></li>
					<li id="tab1_2"><a href="http://www.jsfoot.com/js/items/">javascript 特效</a></li> 
					<li id="tab1_3"><a href="http://www.jsfoot.com/css3/items/">css3 特效</a></li> 
				</ul>			
			</div> 
			<div class="img_area">
				<ul id="tab1_1_body">
					<li><a href="http://www.jsfoot.com/jquery/items/2011-08-04/102.html"><img width="387" height="241" alt="jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件" src="http://www.jsfoot.com/d/file/jquery/items/2011-08-04/93f0fbcca20b400dfab9522431cc9de0.jpg" /></a></li> 
				</ul>
				<ul id="tab1_2_body">
					<li><a href="http://www.jsfoot.com/jquery/items/2011-07-29/88.html"><img width="387" height="241" alt="jquery特效插件Validform制作一行代码搞定整站的表单验证" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-29/b50d9142bb49dc3c6f12d51a5eba58bb.jpg" /></a></li>
				</ul>
				<ul id="tab1_3_body">
					<li><a href="http://www.jsfoot.com/jquery/items/2011-07-26/82.html"><img width="387" height="241" alt="jquery特效制作 slide 图片窗帘式滚动" src="http://www.jsfoot.com/d/file/jquery/items/2011-07-26/bb276cedeaeb0438ed3275a9711b1d69.jpg" /></a></li>				
				</ul>
			</div>
		</div><!--area end-->
		
		<div class="area" > 
			<div class="tab_area"  id="tab2"> 
				<ul> 
					<li id="tab2_1" class="current"><a href="http://www.jsfoot.com/jquery/items/">jQuery 特效</a></li>
					<li id="tab2_2"><a href="http://www.jsfoot.com/js/items/">javascript 特效</a></li> 
					<li id="tab2_3"><a href="http://www.jsfoot.com/css3/items/">css3 特效</a></li>
				</ul>			
			</div> 
			<div class="img_area">
				<ul id="tab2_1_body">
					<li><a href="http://www.jsfoot.com/jquery/items/2011-02-27/62.html"><img width="387" height="241" alt="霓虹灯文字效果使用jQuery和CSS" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-27/7726b53caa0b6a8c1b5ef5ad51ad4445.jpg" /></a></li> 
				</ul>
				<ul id="tab2_2_body">
					<li><a href="http://www.jsfoot.com/jquery/items/2011-02-25/58.html"><img width="387" height="241" alt="灵活的网页:一个jQuery分页的解决方案" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-25/096c0ef7e22173fa1728074211fd586a.jpg" /></a></li>
				</ul>
				<ul id="tab2_3_body">
					<li><a href="http://www.jsfoot.com/jquery/items/2011-02-24/56.html"><img width="387" height="241" alt="赞助翻转和CSS jQuery的墙" src="http://www.jsfoot.com/d/file/jquery/items/2011-02-24/ad5376e1cbfbebc64a368951d84a6580.jpg" /></a></li>
				</ul>
			</div>
		</div><!--area end-->
		
	</div><!--wrap950 end-->
<script type="text/javascript"> 
function $i(id){
	return document.getElementById(id);
}
function tabswitch(c, config){
	this.config = config ? config : {start_delay:3000, delay:1500};
	this.container = $i(c);
	this.pause = false;
	this.nexttb = 1;
	this.tabs = this.container.getElementsByTagName('dt');
	var _this = this;
	if(this.tabs.length<1)this.tabs = this.container.getElementsByTagName('li');
	for(var i = 0; i < this.tabs.length; i++){
		var _ec = this.tabs[i].getElementsByTagName('span');
		if(_ec.length<1)_ec = this.tabs[i].getElementsByTagName('a');
		if(_ec.length<1){
			_ec = this.tabs[i]
		}else{
			_ec = _ec[0];
		}
		_ec.onmouseover = function(e) {
			_this.pause = true;
			var ev = !e ? window.event : e;
			_this.start(ev, false, null);
		};
		
		_ec.onmouseout = function() {
			_this.pause = false;
		};
		
		try{
			$i(this.tabs[i].id + '_body').onmouseover = function(){
				_this.pause = true;
			};
			
			$i(this.tabs[i].id + '_body').onmouseout = function(){
				_this.pause = false;
			};
		}catch(e){}
	}
 
	if ($i(c + '_sts')) {
		var _sts = $i(c + '_sts');
		var _step = _sts.getElementsByTagName('li');
		if(_step.length<1)_step = _sts.getElementsByTagName('div');
		_step[0].onclick = function() {
			if (_this.tabs[_this.tabs.length-1].className.indexOf('current') > -1) {
				_this.nexttb = _this.tabs.length + 1;
			};
			_this.nexttb = _this.nexttb - 2 < 1 ? _this.tabs.length : _this.nexttb - 2;
			//alert(_this.nexttb);
			_this.start(null, null, _this.nexttb);
		};
		
		_step[1].onclick = function() {
			_this.nexttb = _this.nexttb < 1 ? 1 : _this.nexttb;
			_this.start(null, null, _this.nexttb);
		};
	};
	
	this.start = function(e, r, n){
		if(_this.pause && !e)return;
		if(r){
			curr_tab = $i(_this.container.id + '_' + rand(4));
		}else{
			if(n){				
				curr_tab = $i(_this.container.id + '_' + _this.nexttb);
			}else{
				curr_tab = e.target ? e.target : e.srcElement;
				if(curr_tab.id=="")curr_tab = curr_tab.parentNode;
			}
		}
		
		var tb = curr_tab.id.split("_");
		for(var i = 0; i < _this.tabs.length; i++){
			if(_this.tabs[i]==curr_tab){
				_this.tabs[i].className="current";
				try{					
					$i(_this.tabs[i].id + '_body').style.display = "block";
				}catch(e){}
			}else{
				_this.tabs[i].className="";
				try{
					$i(_this.tabs[i].id + '_body').style.display = "none";
				}catch(e){}
			}
		}
		_this.nexttb = parseInt(tb[tb.length-1]) >= _this.tabs.length ? 1 : parseInt(tb[tb.length-1]) + 1;
	};
}
//设置
var tab1,tab2;
function init_load(){
    if ($i('tab1')) {
		tab1 = new tabswitch('tab1', {});
		setInterval("tab1.start(null, null, 1);", 6000);
	}
	if ($i('tab2')) {
		tab2 = new tabswitch('tab2', {});
		setInterval("tab2.start(null, null, 1);", 6000);
	}
}
if(window.attachEvent){
    window.attachEvent("onload",init_load);
}else if(window.addEventListener){
    window.addEventListener("load",init_load,false);
}
</script> 
</body> 
</html>